<template>
  <div id="x-spreadsheet"></div>
</template>

<script>
// 引入依赖包
import Spreadsheet from "x-data-spreadsheet"; // https://hondrytravis.com/x-spreadsheet-doc/
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
export default {
  name:'',
  components: {},
  data() {
    return {
    };
  },
  props: {},
  watch: {},
  computed: {
    config(){
        return {
            mode: 'edit', // edit | read
            showToolbar: true,
            showGrid: true,
            showContextmenu: true,
            view: {
                height: () => document.documentElement.clientHeight,
                width: () => document.documentElement.clientWidth,
            },
            row: {
                len: 100,
                height: 25,
            },
            col: {
                len: 26,
                width: 100,
                indexWidth: 60,
                minWidth: 60,
            },
            style: {
                bgcolor: '#ffffff',
                align: 'left',
                valign: 'middle',
                textwrap: false,
                strike: false,
                underline: false,
                color: '#0a0a0a',
                font: {
                    name: 'Helvetica',
                    size: 10,
                    bold: false,
                    italic: false,
                },
            },
        }
    }
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init(){
        Spreadsheet.locale("zh-cn", zhCN);
        this.xs = new Spreadsheet("#x-spreadsheet", this.config).change((cdata) => {});
        this.xs.cellText(0, 0, 'xxxx').cellText(6, 5, 'yyy').reRender();
        // this.xs.addSheet('abc', true)
        console.log(this.xs.getData())
        this.initEvent();
    },
    initEvent(){
        this.xs.on('cell-selected', this.cellSelected);
        this.xs.on('cells-selected', this.cellsSelected);
        // edited on cell
        this.xs.on('cell-edited',this.cellEdited);
        this.xs.on('change',this.change);
    },
    cellSelected(cell, ri, ci){
        console.log(cell, ri, ci)
    },
    cellsSelected(cell, { sri, sci, eri, eci }){
        console.log(cell, { sri, sci, eri, eci })
    },
    cellEdited(text, ri, ci){
        console.log(text, ri, ci)
    },
    change(){
        console.log(arguments)
    }
  }
};
</script>
<style scoped>
</style>